<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import headerBar from '../component/headerBar.vue'
import ChooseDialogue from '@/components/app/chooseDialogue.vue'
import MyIcon from '@/components/my-icon/index.vue'
import upload from '@/components/app/upload.vue'
import { toRaw } from '@vue/reactivity'
import { Plus } from '@element-plus/icons-vue'
import editsop from '@/components/app/groupchat.vue'
const ruleFormRef = ref()
const tagGroupForm = reactive({
	name: '',
	staffList: [],
	staffType: 1,
	sex: 1,
	date: '',
	tagList: [],
	content: '',
	groupChart: [],
	filter: true
})
const form = ref({
	rule: [{ id: '', isShow: true, name: '' }]
})
const typeshow = ref(1)
const chooseDialogue = ref()
const selectStaffValue = ref([])
const selectStaffDay = ref([])
const openingDialogName = ref('')
const timeInterval = ref('')
// 强制刷新
const isRefresh = ref(true)
const edit = ref(null)
const handleRefresh = () => {
	isRefresh.value = false
	isRefresh.value = true
}
const nowTime = ref('')
const editsopapi = (val) => {
	var data = {
		show: true,
		id: val,
		name: val.name
	}
	edit.value.addapi(data)
}
const showDialogue = (type, name, title) => {
	typeshow.value = type
	console.log('弹窗', typeshow.value)
	switch (name) {
		case 'staff':
			if (title == 'staffid') {
				openingDialogName.value = 'staffid'
				var arr = toRaw(form.value.staffid)
				console.log(name, dataArr)
				chooseDialogue.value.show(name, dataArr)
			}
			if (title == 'staffidTime') {
				openingDialogName.value = 'staffidTime'
				var arr = toRaw(form.value.staffidTime)
				console.log('5555', name, dataArr)
				chooseDialogue.value.show(name, dataArr)
			}
			break
		case 'tag':
			openingDialogName.value = name
			// var arr = toRaw(form.value[name])
			var dataArr = []
			// arr.forEach((item) => {
			// 	dataArr.push(item)
			// })
			chooseDialogue.value.show(name, dataArr)
			break
	}
}

const rules = reactive({
	name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
	staffList: [{ required: true, message: '请输入群发账号', trigger: 'change' }],
	staffType: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
	content: [{ required: true, message: '请输入群引导语', trigger: 'blur' }]
})
const dialogVisible = ref(false)
const submitForm = async (formEl) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log('submit!')
		} else {
			console.log('error submit!', fields)
		}
	})
}
const getChooseData = (val) => {
	if (typeshow.value == 1) {
		var Type = toRaw(val)
		selectStaffValue.value = Type

		tagGroupForm.staffList = selectStaffValue.value.map((item) => {
			return item.id
		})

		// getDataByIds(selectStaffValue.value)
	} else if (typeshow.value == 2) {
		var Type = toRaw(val)
		selectStaffDay.value = Type
		tagGroupForm.tagList = selectStaffDay.value.map((item) => {
			return item.id
		})
		// getDataByIds(selectStaffDay.value)
	}
}
const changeDialogVisible = (visible) => {
	dialogVisible.value = visible
}
const groupchatapi = (val) => {
	tagGroupForm.groupChart = val._value
	console.log(val._value)
}
const getNowTime = () => {
	timeInterval.value = setInterval(() => {
		// nowTime.value=new da
		let time = new Date().toLocaleTimeString()
		nowTime.value = time.slice(0, 5)
	}, 2000)
}
const delGroupChart = (id) => {
	tagGroupForm.groupChart = tagGroupForm.groupChart.filter((item) => {
		return item.id != id
	})
}
onMounted(() => {
	getNowTime()
})
onBeforeUnmount(() => {
	clearInterval(timeInterval.value)
})
</script>
<template>
	<div class="main">
		<el-scrollbar max-height="100%">
			<headerBar :title="'标签建群'" />
			<div class="content">
				<div class="card-box">
					<div class="ame-alert">
						<el-icon class="bell-icon"><BellFilled /></el-icon>
						<p class="ame-alert-content">
							<span class="ame-alert-content-text"
								>每位客户每天可以接收1条群发消息，不限企业发布的群发还是个人发布的群发。达到上限后，无法再接收管理员的群发消息
							</span>
						</p>
					</div>
					<h4>基础信息</h4>
					<el-divider style="margin: 12px 0 24px 0" />
					<el-form ref="ruleFormRef" :model="tagGroupForm" :rules="rules" label-width="120px" class="demo-ruleForm">
						<el-form-item label="任务名称：" prop="name">
							<el-input style="width: 440px; height: 36px" placeholder="请写任务名称" v-model="tagGroupForm.name" />
						</el-form-item>
						<el-form-item label="选择群发账号：" prop="staffList">
							<el-select
								style="width: 216px; height: 36px"
								v-model="tagGroupForm.staffList"
								multiple
								remote
								reserve-keyword
								remote-show-suffix
								:suffix-transition="false"
								clearable
								placeholder="选择群发账号"
								@focus="showDialogue('1', 'staff', 'staffid')"
							>
								<el-option v-for="item in selectStaffValue" :key="item.id" :label="item.name" :value="item.id">
									<img style="width: 23px; height: 23px" :src="item.avatar" alt="" />
									<p>{{ item.name }}</p>
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="筛选客户：" prop="staffType">
							<el-radio-group v-model="tagGroupForm.staffType">
								<el-radio :label="1">筛选客户</el-radio>
								<el-radio :label="2">全部客户</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item>
							<div class="select-content">
								<p class="bar">筛选客户</p>
								<el-divider style="margin: 12px 0" />
								<div class="ame-form-item" style="margin-left: 29px">
									<div class="ame-form-item-label">性别：</div>
									<div class="ame-form-item-content">
										<el-radio-group v-model="tagGroupForm.sex">
											<el-radio :label="1" size="large">全部性别</el-radio>
											<el-radio :label="2" size="large">仅男性粉丝</el-radio>
											<el-radio :label="3" size="large">仅女性粉丝</el-radio>
											<el-radio :label="4" size="large">未知性别</el-radio>
										</el-radio-group>
									</div>
								</div>
								<div class="ame-form-item">
									<div class="ame-form-item-label">添加时间：</div>
									<div class="ame-form-item-content">
										<el-date-picker
											v-model="tagGroupForm.date"
											type="daterange"
											range-separator="~"
											start-placeholder="开始时间"
											end-placeholder="结束时间"
										/>
									</div>
								</div>
								<div class="ame-form-item">
									<div class="ame-form-item-label" style="margin-left: 27px">标签：</div>
									<div class="ame-form-item-content">
										<el-select
											style="width: 216px; height: 36px"
											v-model="tagGroupForm.tagList"
											multiple
											remote
											reserve-keyword
											remote-show-suffix
											:suffix-transition="false"
											clearable
											placeholder="请选择标签"
											@focus="showDialogue('2', 'tag', 'tagid')"
										>
											<el-option v-for="item in selectStaffDay" :key="item.id" :label="item.name" :value="item.id">
												<img style="width: 23px; height: 23px" :src="item.avatar" alt="" />
												<p>{{ item.name }}</p>
											</el-option>
										</el-select>
									</div>
								</div>
								<el-divider v-show="tagGroupForm.sex != 1" style="margin-bottom: 10px" />
								<p v-show="tagGroupForm.sex != 1" class="client-info">将发送消息给 符合条件的粉丝</p>
							</div>
							<p class="content-select-all">
								<MyIcon style="font-size: 16px" name="AntDesignFilesearchOutlined" />
								<span>查看该消息预计送达人数：</span>
								<span class="serach">查看</span>
							</p>
						</el-form-item>
						<h4>设置群信息</h4>
						<el-divider style="margin: 12px 0 24px 0" />
						<div class="driver">
							<div class="driver-left">
								<el-form-item label="入群引导语：" style="margin-left: 15px" prop="content">
									<el-input
										v-model="tagGroupForm.content"
										:rows="2"
										type="textarea"
										maxlength="4000"
										resize="none"
										show-word-limit
										placeholder="请输回复内容"
										:autosize="{
											minRows: 10
										}"
									/>
								</el-form-item>
								<el-form-item>
									<div class="tips">
										<span class="left">提示：</span>
										<ul>
											<li>
												1、群人数上限为200人，超过200人时请 <strong>【添加多个群聊】</strong>，否则可能会导致部分用户
												<strong>【无法入群】</strong>，添加多个群聊时，客户只会收到一条群发邀请
											</li>
											<li>
												2、上传群二维码时请<strong>【仔细核对】</strong>，群二维码和群聊<strong>【对应错误】</strong>将导致<strong
													>【数据异常】</strong
												>
											</li>
											<li>3、如果客户添加了多个客服，只会收到一位客服的入群邀请</li>
										</ul>
									</div>
								</el-form-item>
								<div v-if="tagGroupForm.groupChart.length > 0">
									<el-form-item
										v-for="(item, index) in tagGroupForm.groupChart"
										:key="item.id"
										style="margin-left: 15px"
										:label="`群聊 ${index + 1}：`"
									>
										<div class="groupChart-list">
											<div class="groupChart-item">
												<div class="group-card">
													<img
														src="../../../../assets/img/img/avatar-room-default.67bead38e751.svg"
													/>
													<div>
														<p class="name">{{ item.name }}</p>
														<span class="count">3 / 200人</span>
													</div>
												</div>
												<el-tooltip effect="dark" content="修改" placement="top"
													><el-icon @click="editsopapi" class="group-icon"><EditPen /></el-icon
												></el-tooltip>
												<el-tooltip effect="dark" content="删除" placement="top"
													><el-icon @click="delGroupChart(item.id)" class="group-icon"><Delete /></el-icon
												></el-tooltip>
											</div>
											<div class="upload-box">
												<upload :text="'上传群二维码'" />
											</div>
										</div>
									</el-form-item>
								</div>

								<el-form-item style="margin-left: 15px" label="群聊：">
									<el-button @click="editsopapi" class="group-btn" :icon="Plus">选择群聊</el-button>
								</el-form-item>
							</div>
							<div class="driver-right">
								<p>客户收到的消息</p>
								<div class="phone-preview-content">
									<span class="now-time">{{ nowTime }}</span>
									<img src="../../../../assets/img/img/phone.1c130fa643cd.png" class="bg" />
									<div v-show="tagGroupForm.content != ''" class="inner">
										<div class="message message-text">
											<img
												class="avatar"
												src="../../../../assets/img/img/avatar-default.af3289dacfcf.svg"
											/>
											<div>{{ tagGroupForm.content }}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<el-divider style="margin: 12px 0 24px 0" />
						<el-form-item style="margin-left: 15px" label="过滤客户：">
							<div style="width: 100%">
								<el-switch v-model="tagGroupForm.filter" />
								<span class="ame-switch-text">{{ tagGroupForm.filter ? '已开启' : '已关闭' }}</span>
							</div>
							<p class="switch-bottom-text">开启后已在群聊中的客户将不会收到邀请</p>
							<p class="content-select-all">
								<MyIcon style="font-size: 16px" name="AntDesignFilesearchOutlined" />
								<span>查看该消息预计送达人数：</span>
								<span class="serach">查看</span>
							</p>
						</el-form-item>
						<div class="footer-btn">
							<el-button class="ame-btn-lg" type="primary" @click="submitForm(ruleFormRef)">通知成员发送邀请</el-button>
							<span>发送后需要员工确认发送后才会将群二维码发送给对应的客户</span>
						</div>
					</el-form>
				</div>
			</div>
			<editsop ref="edit" :groupchatapi="groupchatapi" />
			<ChooseDialogue :dialogVisible="dialogVisible" @getChooseData="getChooseData($event, val)" ref="chooseDialogue" />
		</el-scrollbar>
	</div>
</template>
<style lang="scss" scoped>
@import '@/assets/style/groupManagement/createTagGroup.scss';
</style>
